<template>
  <div class="live_control">
    <el-row>
      <el-col :span="5">
        <controlLeft :info="info"></controlLeft>
      </el-col>
      <el-col :span="7">
        <controlCenter :info="info"></controlCenter>
      </el-col>
      <el-col :span="12">
        <controlRight :info="info"></controlRight>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import controlLeft from "@/components/live/live_control/control_left";
import controlCenter from "@/components/live/live_control/control_center";
import controlRight from "@/components/live/live_control/control_right";
import { mapGetters, mapState } from "vuex";
export default {
  name: "live_control",
  data () {
    return {
      online_list: [],
      info: {
        now_online_number: 0
      },

      vnk: ""
    };
  },
  components: {
    controlLeft,
    controlCenter,
    controlRight
  },
  computed: {
    ...mapState({
      messageList: state => state.live.msglist,
      Prelist: state => state.live.Prelist,
      nowroom: state => state.live.nowroom
    }),
    roomim () {
      return decodeURIComponent(this.$route.query.im);
    }
  },
  created () {
    this.getlive();
    this.vnk = this.$route.query.VNK;
  },
  watch: {
    // nowroom (now, old) {
    //   if (now != this.$route.query.im) {
    //     this.$fnc.alertError("已退出该直播间");
    //   }
    // }
  },
  methods: {

    getlive () {
      this.$api.getPage.single_livelist({ id: this.$route.query.id }).then(res => {
        if (res.data.code == 200) {
          this.info = res.data.result;
          this.joinroom();
        }
      })
    },
    do_timer () {
      //获取直播间在线人数
      this.tim.getGroupOnlineMemberCount(this.roomim).then(imResponse => {
        console.log(imResponse)
        this.$set(this.info, 'now_online_number', imResponse.data.memberCount)
      });
      if (this.$route.query.VNK && this.vnk == this.$route.query.VNK) {
        setTimeout(() => {
          this.do_timer();
        }, 5000);
      }
    },
    joinroom () {
      var option = {
        groupID: this.roomim,
        type: this.TIM.TYPES.GRP_AVCHATROOM
      };
      console.log(option);
      this.tim
        .joinGroup(option)
        .then(imResponse => {
          //加入成功清空消息
          this.$store.commit("clearMsg", this.$route.query.im);
          this.do_timer();
        })
        .catch(imError => {
          console.warn("joinGroup error:", imError); // 申请加群失败的相关信息
        });
    },
    getinfo () { }
  }
};
</script>
<style lang="less" scoped>
.live_control {
  height: 100%;
  font-size: 13px;
  /deep/.el-row,
  .el-col {
    height: 100%;
  }
  /deep/.control_user {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        text-overflow: ellipsis;
        min-width: 70px;
        max-width: 110px;
        white-space: nowrap;
        overflow: hidden;
        text-align: left;
      }
      img {
        width: 30px;
        height: 30px;
        margin-right: 5px;
      }
    }
  }
}
</style>
